*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo3{
    width: 100%;
    
}
/* 顶部 */
.header{
     width: 100%;
    height: 100px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    border-bottom: 1px solid #ccc;
}
/* 主盒子 */
.mian{
    width: 80%;
    /* background-color: pink; */
     margin: auto;
}
/* tab切换 */
.tav{
    margin-top: 110px;
    height: 430px;
    display: flex;
}
.tav .tav_left{
    width: 400px;
    height: 430px;
    background-color: #3d3d3e;
    
}
.tav_left p{
    width: 360px;
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
    color: #939394;
    display: flex;
    justify-content: space-around;
    margin-top: 25px;
    position: relative;
    
}
.tav_left p .tav1{
     position: absolute;
    background-color: white; /* Background color */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* Initially transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 600px;
    height: 430px;
    left: 360px;
    top: -25px;
}
.tav_left p .tav1 div{
    float: left;
    margin: 10px;
}
.tav_left p .tav2{
     position: absolute;
    background-color: white; /* Background color */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* Initially transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 500px;
    height: 430px;
    left: 360px;
    top: -90px;
}
.tav_left p .tav2 div{
     float: left;
    margin: 10px;
}
.tav_left p .tav3{
     position: absolute;
    background-color: white; /* Background color */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* Initially transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 600px;
    height: 430px;
    left: 360px;
    top: -155px;
}

.tav_left p .tav3 div{
     float: left;
    margin: 10px;
}
.tav_left p .tav4{
     position: absolute;
    background-color: white; /* Background color */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* Initially transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 500px;
    height: 430px;
    left: 360px;
    top: -220px;
}
.tav_left p .tav4 div{
     float: left;
    margin: 10px;
}
.tav_left p .tav5{
     position: absolute;
    background-color: white; /* Background color */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* Initially transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 500px;
    height: 430px;
    left: 360px;
    top: -285px;
}
.tav_left p .tav6{
     position: absolute;
    background-color: white; /* Background color */
    visibility: hidden; /* Initially hidden */
    opacity: 0; /* Initially transparent */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 650px;
    height: 430px;
    left: 360px;
    top: -350px;
}
.tav_left p:hover .tav1 {
    visibility: visible; /* Show when <p> is hovered */
    opacity: 1; /* Fade in */
}
.tav_left p:hover .tav2 {
    visibility: visible; /* Show when <p> is hovered */
    opacity: 1; /* Fade in */
}
.tav_left p:hover .tav3 {
    visibility: visible; /* Show when <p> is hovered */
    opacity: 1; /* Fade in */
}
.tav_left p:hover .tav4 {
    visibility: visible; /* Show when <p> is hovered */
    opacity: 1; /* Fade in */
}
.tav_left p:hover .tav5 {
    visibility: visible; /* Show when <p> is hovered */
    opacity: 1; /* Fade in */
}
.tav_left p:hover .tav6 {
    visibility: visible; /* Show when <p> is hovered */
    opacity: 1; /* Fade in */
}
.tav_left p:hover{
    background-color: #585859;
    color: white;
     visibility: visible; /* 显示 */
    opacity: 1; /* 渐变为不透明 */
}
.tav .tav_right{
    width: 950px;
    height: 430px;
}
.tav_right img{
    width: 100%;
    height: 100%;
}
/* tab下方的img */
.tav_img{
    margin-top: 10px;
    height: 165px;
    background-color: orange;
}
.tav_img img{
    width: 100%;
    height: 100%;
}
/* 专区 */
.zhuanqu{
    margin-top: 40px;
    height: 1500px;
    /* background-color: yellow; */
}
.zhuanqu .zqu1{
    width: 100%;
    height: 500px;
    /* background-color: aqua; */
}
.zhuanqu .zqu1 .title{
    width: 100%;
    height: 30px;
    /* background-color: darkgoldenrod; */
}
.zhuanqu .zqu1 .zqu1-box{
    width: 100%;
    height: 470px;
    /* background-color: antiquewhite; */
}
/* 合作品牌 */
.hzpp{
    margin-top: 20px;
    height: 520px;
    /* background-color: sandybrown; */
}
/* 底部上方图片 */
.footer_top{
    border-top: 1px solid #ccc;
    margin-top: 40px;
    height: 92px;
}
.footer_top .footer_box{
    width: 1000px;
    height: 92px;
    margin: 0 auto;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: space-around;
}

/* 底部 */
.footer{
    height: 310px;
    background-color: #1e1f21;
    color: white;
}
.footer .footer_top{
    width: 1000px;
    height: 200px;
    /* background-color: chartreuse; */
    margin: 0 auto;
    display: flex;
    border-bottom: 1px solid #ccc;
}
.footer .footer_top .footerleft{
    width: 600px;
    height: 100%;
}
.footer .footer_top .footerleft p{
    margin-top: 20px;
    font-size: 12px;
   
}
.footer .footer_top .footerleft .p1{
    display: flex;
    justify-content: space-around;
}
.footer .footer_top .footerleft .p{
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
}
.footer .footer_top .footerright{
    width: 400px;
    height: 100%;
}
.footer .footer_top .footerright p{
    margin-left: 100px;
    margin-top: 30px;
}
.footer .footer_bottom{
    width: 1000px;
    height: 100px;
    background-color: darkgray;
    margin: 0 auto;
}
.footer .footer_bottom img{
    width: 100%;
    height: 100%;
}